<script setup>
import { Plus } from '@element-plus/icons-vue';
import PictureSelectorDialog from '/@/components/pictureSelector/PictureSelectorDialog.vue';
const props = defineProps({
	modelValue: {
		type: Array,
		default: () => [],
	},
	disabled: {
		type: Boolean,
		default: () => false,
	},
});

const isShowPicSelector = ref(false);
const emit = defineEmits(['update:modelValue']);
const picList = computed(() => props.modelValue || []);
// const picList = computed<any>(() => (props.modelValue ? props.modelValue : []));
console.log('8------', picList);

const onShowPicSelect = () => {
	if (props.disabled) {
		isShowPicSelector.value = true;
	}
};

const getPic = (pic) => {
	const picListArr = pic.map(({ imgUrl }) => {
		return imgUrl;
	});
	picList.value.push(...picListArr);
	//console.log("0-0---", picList.value);
	// let pics = picList.join(",");
	emit('update:modelValue', picList.value);
};
</script>
<template>
	<div class="ImgList">
		<div class="upload_btn" @click="onShowPicSelect">
			<el-icon><Plus /></el-icon>
		</div>
		<div class="img_list">
			<ul>
				<li v-for="(item, index) in picList" :key="index">
					<Img :src="item" />
				</li>
			</ul>
		</div>
		<PictureSelectorDialog v-model="isShowPicSelector" @submit="getPic" />
	</div>
</template>

<style lang="scss" scoped>
.ImgList {
	display: flex;
	.upload_btn {
		--el-upload-picture-card-size: 70px;
		background-color: var(--el-fill-color-lighter);
		border: 1px dashed var(--el-border-color-darker);
		border-radius: 6px;
		box-sizing: border-box;
		width: var(--el-upload-picture-card-size);
		height: var(--el-upload-picture-card-size);
		cursor: pointer;
		vertical-align: top;
		display: inline-flex;
		justify-content: center;
		align-items: center;
		margin-right: 10px;
		&:hover {
			border-color: var(--el-color-primary);
			color: var(--el-color-primary);
		}
	}
	.img_list {
		ul {
			display: flex;
			li {
				width: 70px;
				height: 70px;
				margin-right: 0.2rem;
				border-radius: 6px;
				overflow: hidden;
				img {
					width: 100%;
				}
			}
		}
	}
}
</style>
